<template>
  <view class="min-h-100vh bg-[#f1f1f1] p-x-[110rpx] p-y-[150rpx] box-border">
    <!-- 导航栏 -->
    <wd-navbar 
      custom-class="navbar-custom" 
      :title="paperInfoData.title" 
      :bordered="false" 
      fixed 
      placeholder 
      safeAreaInsetTop
      left-arrow
      @click-left="goBack"
    ></wd-navbar>

    <!-- 成绩卡片 -->
    <view class="bg-[#fff] rounded-[16rpx] overflow-hidden shadow">
      <!-- 完成标题 -->
      <view class="result-header">考试须知</view>

      <!-- 成绩信息 -->
      <view 
        class="py-[40rpx] px-[30rpx] m-l-[100rpx]" 
      >
        <view class="flex items-center mb-[30rpx]">
          <text class="text-[32rpx] text-[#282828]">考试时间：</text>
          <text class="text-[32rpx] text-[#282828]">{{ formatSeconds(paperInfoData.duration) || '--' }}</text>
        </view>
        <view class="flex items-center mb-[30rpx]">
          <text class="text-[32rpx] text-[#282828]">考试分数：</text>
        <text class="text-[32rpx] text-[#282828]">{{ paperInfoData.score || '--' }}分</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="px-[30rpx] pt-[0rpx] pb-[60rpx] flex flex-col items-center gap-[20rpx]">
        <wd-button custom-class="result-btn" round @click="handleStart">
          开始考试
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { paperInfo } from '@/api/exam.js'
import { formatSeconds } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '考试开始公共页面',
  },
})

const paper_id = ref(''); // 试卷ID
const paperInfoData = ref({}) // 试卷详情
onLoad((options) => {
  paper_id.value = options.id || ''
  paperInfo({
    paper_id: paper_id.value
  }).then(res => {
    paperInfoData.value = res
  })
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 开始考试
const handleStart = () => {
  uni.navigateTo({
    url: `/pages-children/examQuestion/index?paper_id=${paper_id.value}`,
  })
}
</script>

<style lang="scss" scoped>
.result-header {
  background-image: url('/static/images/bg0.png');
  background-size: cover;
  background-position: center;
  color: #282828;
  font-size: 36rpx;
  font-weight: 400;
  text-align: center;
  padding: 30rpx;
}
</style>

<style lang="scss">
.result-btn {
  width: 360rpx !important;
  height: 64rpx !important;
  background-image: url('/static/images/bg0.png') !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  color: #282828 !important;
  font-size: 32rpx !important;
  font-weight: 400 !important;
  line-height: 64rpx !important;
}
</style>
